<template>
    <div class="cu-modal" :class="{ show: showReport }" @click="closeAuthModal">
        <div class="cu-dialog" style="width: 890px;" @click.stop>
            <div class="p-30">
                <div class="head-box">
                    <div class="head-title">一键举报</div>
                </div>

                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="举报类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择举报类型">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="举报厂商" prop="shop_id">
                        <el-select v-model="ruleForm.shop_id" placeholder="请选择举报厂商" @change="handleSelectShop">
                            <el-option v-for="item in shopList" :key="item.id" :label="item.merchant_name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="举报理由" prop="reason">
                        <el-input type="textarea" :rows="8" placeholder="请输入举报理由" v-model="ruleForm.reason"
                            maxlength="200" show-word-limit>
                        </el-input>
                    </el-form-item>

                    <el-form-item class="text-left" prop="images">
                        <div class="upload-image">
                            <upload @change="onChange" @success="onSuccess" @error="onError" :show-progress="true">
                                <el-avatar v-if="ruleForm.images" :src="ruleForm.images" class="avatar"></el-avatar>
                                <div class="flex align-items flex-wrap center" v-else>
                                    <i class="el-icon-plus font-26"></i>
                                    <div class="w-100">上传图片</div>
                                </div>
                            </upload>
                        </div>
                    </el-form-item>
                    <el-form-item class="text-center">
                        <el-button @click="closeAuthModal">取消</el-button>
                        <el-button type="danger" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * 意见反馈弹窗
 */
import { mapActions, mapGetters } from 'vuex'
import { getShopList, userReport } from '@/api/apis'
import upload from '@/components/upload.vue'
export default {
    name: 'reportModal',
    components: {
        upload
    },
    data () {
        return {
            options: [{
                value: 1,
                label: "技术/产品常识错误"
            },
                {
                    value: 2,
                    label: "逻辑混乱"
                },
                {
                    value: 3,
                    label: "老旧重复内容"
                },
                {
                    value: 4,
                    label: "涉嫌侵权/抄袭"
                },
                {
                    value: 5,
                    label: "虚假内容"
                },
                {
                    value: 6,
                    label: "软文广告"
                },
                {
                    value: 7,
                    label: "文字/排版错误"
                },
                {
                    value: 8,
                    label: "题文不符/图文不符"
                },
                {
                    value: 9,
                    label: "其他违规"
                }
            ],

            shopList: [],
            dialogImageUrl: '',
            ruleForm: {
                type: '',
                manufacturer: '',
                reason: '',
                shop_name: '', // 举报厂商
                shop_id: '', // 举报厂商id
                images: ''
            },
            rules: {
                type: [
                    { required: true, message: '请选择举报类型', trigger: 'blur' }
                ],
                shop_id: [
                    { required: true, message: '请选择举报厂商', trigger: 'blur' }
                ],
                reason: [
                    { required: true, message: '请输入举报理由', trigger: 'blur' },
                    { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['initStore', 'isLogin', 'isShowReportModal']),
        showReport: {
            get () {
                return !!this.isShowReportModal
            },
            set (value) {

            }
        },
    },
    mounted () {
        this.getShopListData()
    },
    methods: {
        ...mapActions(['getUserInfo', 'showReportModal']),
        // 关闭模态框
        closeAuthModal () {
            this.$store.dispatch('showReportModal', false)
        },
        onChange (file) {
            console.log('上传文件的状态发生改变', file)
        },
        onSuccess (file) {
            console.log('上传文件成功', file)
        },
        onError (file) {
            console.log('上传文件失败', file)
        },
        beforeAvatarUpload (file) { },
        handleClose (done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done()
                })
                .catch((_) => { })
        },
        handleRemove (file, fileList) {
            console.log(file, fileList)
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },

        getShopListData () {
            getShopList({
                title: this.keywords
            }).then(res => {
                if (res.code === 1) {
                    this.shopList = res.data
                }
            })
        },
        handleSelectShop(e){
            // 根据选择的厂商id，获取厂商名称
            this.shopList.forEach(item => {
                if(item.id === e){
                    this.ruleForm.shop_name = item.merchant_name
                }
            })
        },
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    userReport(this.ruleForm).then(res => {
                        if (res.code === 1) {
                            this.$message.success(res.msg)
                            this.closeAuthModal()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>
.upload-image {
    /deep/.upload {
        .el-upload {
            width: 88px;
            height: 88px;
            line-height: 36px;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            &:hover {
                border-color: #409eff;
                color: #409eff;
            }
            i {
                margin-top: 15px;
            }
        }
    }
}
.el-select {
    width: 100%;
}
</style>